/*
 * @Description: 备份计划弹窗 - 范围面板
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:15
 * @LastEditTime: 2022-08-16 19:09:15
 */

import { Alert, Checkbox, Divider, Form, FormInstance, Input, Radio } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import { useState } from 'react';

const CheckboxGroup = Checkbox.Group;
const plainOptions = ['档案类型1', '档案类型2', '档案类型3', '档案类型4'];
const range = ['正式库', '接收库', '历史库', '散文件库', '销毁库'];

interface IScopePaneProps {
  form: FormInstance;
}
function ScopePane(props: IScopePaneProps) {
  const { form } = props;
  /**
   * @description: 提交表单方法
   * @param {any} values 表单数据
   */
  const onFinish = () => {
    //
  };
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([]);
  // const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const [checkAllR, setCheckAllR] = useState(false);

  const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
    // setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (eve: CheckboxChangeEvent) => {
    setCheckedList(eve.target.checked ? plainOptions : []);
    // setIndeterminate(false);
    setCheckAll(eve.target.checked);
  };
  const onChangeR = (list: CheckboxValueType[]) => {
    setCheckedList(list);
    // setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAllR(list.length === range.length);
  };

  const onCheckAllChangeR = (eve: CheckboxChangeEvent) => {
    setCheckedList(eve.target.checked ? range : []);
    // setIndeterminate(false);
    setCheckAllR(eve.target.checked);
  };
  return (
    <div className="scope-pane">
      <Alert
        description="执行在线备份档案数据后，可根据实际档案保护要求进行“离线备份”和“档案恢复”。档案备份内容包含：目录数据、电子档案数字对象、元数据、过程信息"
        type="info"
        showIcon
      />
      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} onFinish={onFinish}>
        <Form.Item name="title" label="计划名称" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="设置备份全宗" rules={[{ required: true }]} name="name">
          XXXXX
        </Form.Item>
        <Form.Item label="状态" rules={[{ required: true }]} name="staus">
          <Radio.Group>
            <Radio value={1}>开启</Radio>
            <Radio value={2}>关闭</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="设定档案类型"
          extra="您可多选档案类型进行备份，每个档案类型均会单独生成备份"
          rules={[{ required: true }]}
          name="type"
        >
          <Checkbox onChange={onCheckAllChange} checked={checkAll}>
            全选/反选
          </Checkbox>
          <Divider />
          <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
        </Form.Item>
        <Form.Item label="备份范围" rules={[{ required: true }]} name="range">
          <Checkbox onChange={onCheckAllChangeR} checked={checkAllR}>
            全选/反选
          </Checkbox>
          <Divider />
          <CheckboxGroup options={range} value={checkedList} onChange={onChangeR} />
        </Form.Item>
        <Form.Item name="remark" label="备注">
          <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
        </Form.Item>
      </Form>
    </div>
  );
}

export default ScopePane;
